<template>
  <div class="fenye">
    <div class="top">
      <img src="../assets/images/toubu.png" alt />
    </div>
    <div class="topO">阳光纪检监督智慧监督平台-数据大屏</div>
    <div class="error">
      <div class="up" v-if="isOne">
        <span>
          <img src="../assets/images/Warning.png" alt />
        </span>
        <!-- 用户登录账号不存在 -->
        <span class="error">该账号不存在。</span>
      </div>
      <div class="down" v-if="isTwo">
        <!-- v-if="isTwo" -->
        <span>
          <img src="../assets/images/Warning.png" alt />
        </span>
        <!-- 用户登录密码错误 -->
        <span class="error">账号或密码错误，请重新输入。</span>
      </div>
    </div>
    <div class="banner" v-if=" isTrue">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="el-icon-user"
            v-model="ruleForm.loginName"
            type="text"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div type="button" class="denglu" @click="login" v-on:keyup.enter="login">登录</div>
       <!-- <el-button type="login" @click="login"  class="denglu" native-type="login">登 录</el-button> -->
    </div>
    <div class="last" v-if="!isTrueO">
      <div class="lasto">请直接联系管理员重置密码</div>
      <div class="lastw" @click="back">返 回</div>
    </div>
    <!--提示小字-->
    <div class="Tips-box" v-if="isTrue">
      <el-checkbox v-model="checked">自动登录</el-checkbox>
      <el-button type="text" @click="forgetPassword">忘记密码</el-button>
    </div>
  </div>
</template>
<script>



export default {
  data() {
    return {
      isTrue: true,
      isTrueO: true,
      checked: false,
      isOne: false,
      isTwo: false,
      message: "",

      ruleForm: {
        loginName: "",
        password: "",
      },
      rules: {
        loginName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    let g= this
    document.onkeydown=function(e){
      let key=window.event.keyCode;
      if(key==13){
        g.login()
      }
    }
    this.getCookie();
  },
  watch: {
    message() {
      if (this.message == "用户登录账号不存在") {
        this.isOne = true;
      } else if (this.message == "用户登录密码错误") {
        this.isTwo = true;
      }
    },
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "loginName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        console.log(arr, "截取cookie第一次");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          // console.log(arr, "截取cookie第二次");
          //判断查找相对应的值
          if (arr2[0] == "loginName") {
            console.log(arr2[1], "arr2[1]用户名");
            this.ruleForm.loginName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            console.log(arr2[1], "arr2[1]密码");
            this.ruleForm.password = arr2[1];
          }
        }
        this.checked = true;
        this.$nextTick(() => {
          this.login();
        });
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    forgetPassword() {
      this.isTrue = false;
      this.isTrueO = false;
    },
    back() {
      this.isTrue = true;
      this.isTrueO = true;
    },
    //   登录
    login() {
      var pass = this.$md5(this.ruleForm.password);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.checked == true) {
            //调用设置cookie的方法
            //传入账号名，密码，和保存天数3个参数
            this.setCookie(this.ruleForm.loginName, this.ruleForm.password, 7);
            // console.log(this.ruleForm.loginName,this.ruleForm.password)
          } else {
            //清空Cookie
            this.clearCookie();
          }
          this.Api.getLoginIp({
            loginName: this.ruleForm.loginName,
            password: pass,
          }).then((res) => {
            if (res.code == 0) {
              localStorage.setItem("LoginToken", res.data);
                  this.$router.push({
                name: "Home",
              });
            } else {
              console.log(res.message);
              this.message = res.message;
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.lasto {
  height: 32px;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 32px;
  margin-left: 190px;
  margin-top: 70px;
  margin-bottom: 70px;
}
.banner {
  margin-left: -50px;
}
.lastw {
  width: 492px;
  height: 52px;
  background: #1677ff;
  box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
  border-radius: 5px;
  text-align: center;
  line-height: 52px;
  margin-left: 100px;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.fenye {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1080px;
  background: url(../assets/images/bg.png);
}
.topO {
  width: 698px;
  height: 33px;
  font-size: 42px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 33px;
  margin-top: 38px;
}
.error {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-left: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.up {
  width: 278px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: rgba(10, 70, 242, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(10, 70, 242, 0.3);
}
.down {
  width: 278px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: rgba(10, 70, 242, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(10, 70, 242, 0.3);
}
/deep/.el-input__inner {
  background-color: #0a46f2;
  background-image: none;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: -1px 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 492px;
  height: 52px;
}
.denglu {
  width: 491px;
  height: 52px;
  color: white;
  background: #1677ff;
  font-weight: 600;
  font-size: 24px;
  box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
  border-radius: 5px;
  text-align: center;
  line-height: 52px;
  margin-left: 100px;
}
.Tips-box {
  margin-left: 70px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  width: 492px;
  line-height: 30px;
}
</style>